<template>
  <el-drawer
    :title="title"
    :visible.sync="show"
    :direction="direction"
    :show-close="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :wrapperClosable="false"
    :size="size"
  >
    <slot v-if="show"></slot>
  </el-drawer>
</template>

<script lang="ts">
import { Component, Vue, Prop, PropSync, Provide } from 'vue-property-decorator'
@Component
export default class Drawer extends Vue {
  @Prop({ default: '' }) title!: string
  @Prop({ default: 'rtl' }) direction!: string
  @Prop({ default: '30%' }) size!: string | number
  @PropSync('isDrawer') show!: boolean
  @Provide () drawer = this
  close () {
    this.show = false
  }
}
</script>

<style lang="scss" scoped>
</style>